<script lang="tsx" setup>
import { reactive, ref } from 'vue';
import { Tag } from 'ant-design-vue';
import { parseTime } from '@/utils';
import { royiUnallocatedList } from '@/service/api';

import AddUserSearch from './add-user-search.vue';

interface Props {
  id: string;
}

interface Emits {
  (e: 'tableSelectChange', selectList: any[]): void;
}

const emit = defineEmits<Emits>();

const props = defineProps<Props>();

const searchParams = ref({
  userName: null,
  phonenumber: null,
  // nickName: null,
  roleId: props.id
});

const columnChecks = ref([
  {
    key: 'userName',
    dataIndex: 'userName',
    title: '用户名称',
    width: 150,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'nickName',
    dataIndex: 'nickName',
    title: '用户昵称',
    width: 150,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'email',
    dataIndex: 'email',
    title: '邮箱',
    width: 150,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'phonenumber',
    dataIndex: 'phonenumber',
    title: '手机号码',
    width: 150,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'status',
    dataIndex: 'status',
    title: '状态',
    width: 150,
    align: 'center',
    checked: true,
    ellipsis: true,
    customRender: ({ record }) => {
      if (record.status === null) {
        return null;
      }

      const tagMap: any = {
        0: 'success',
        1: 'error'
      };

      const label = record.status == 0 ? '正常' : '异常';

      return <Tag color={tagMap[record.status] || 'error'}>{label}</Tag>;
    }
  },
  {
    key: 'createTime',
    dataIndex: 'createTime',
    title: '创建时间',
    align: 'center',
    width: 180,
    checked: true,
    ellipsis: true,
    customRender: ({ record }) => {
      if (record.createTime == null) {
        return null;
      }

      return parseTime(record.createTime);
    }
  }
]);
const loading = ref(false);
const tableData = ref([]);

const pagination = reactive({
  current: 1,
  pageSize: 200,
  showSizeChanger: true,
  pageSizeOptions: ['50', '100', '200', '300', '500'],
  showQuickJumper: true,
  showTotal: (total: number) => {
    return `共${total}条`;
  },
  total: 0,
  onChange: async (current: number, size: number) => {
    pagination.current = current;
    pagination.pageSize = size;
    getData();
  }
});

const selectedRowKeys = ref<any[]>([]);
function tableSelectChange(val: any[]) {
  selectedRowKeys.value = val;
  emit('tableSelectChange', val);
}

function getData() {
  const params = {
    ...searchParams.value,
    pageNum: pagination.current,
    pageSize: pagination.pageSize
  };
  royiUnallocatedList(params).then( res => {
      const data = res.otherData
      if (data.code == 200) {
        pagination.total = data?.total || 0;
        tableData.value = data.rows;
      }
  });
  // royiUnallocatedList(params).then(({ data, error }) => {
  //   if (!error) {
  //     pagination.total = data?.total || 0;
  //     tableData.value = data.rows;
  //   }
  // });
}

getData();

function reset() {
  search();
}

function search() {
  pagination.current = 1;
  getData();
}
</script>

<template>
  <div class="jl-main-page one-code-ascend h-full flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
    <AddUserSearch v-model:model="searchParams" @reset="reset" @search="search"></AddUserSearch>
    <ACard
      :bordered="false"
      :body-style="{ flex: 1, overflow: 'hidden' }"
      class="table-card flex-col-stretch sm:flex-1-hidden card-wrapper"
    >
      <template #extra>
        <TableColumnSetting v-model:columns="columnChecks" />
      </template>
      <ATable
        :columns="columnChecks"
        :data-source="tableData"
        bordered
        :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: tableSelectChange }"
        size="small"
        :loading="loading"
        row-key="userId"
        :pagination="pagination"
        :scroll="{ x: 'auto', y: 'auto' }"
        class="h-full"
      />
    </ACard>
  </div>
</template>

<style></style>
